<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <!-- href属性使用hash模式，以#开头 -->
            <a href="#/home">首页</a>
        </li>
        <li>
            <a href="#/about">关于</a>
        </li>
    </ul>
    <!-- 用于展示路由对应的组件内容的容器 -->
    <div id="root"></div>
</body>
<script>
    // 定义路由配置数组
    const routes=[
        { 
            path: '/', // 默认路由
            component: () => '<h1>欢迎页</h1>' 
         },
        {
            path:'/home',  // 路由路径
            component:()=>{  // 路由对应的组件（函数形式返回HTML字符串）
                return '<h1>首页</h1>'
            }
        },
        {
            path:'/about',
            component:()=>{
                return '<h1>关于</h1>'
            }
        }
    ]
    
    // 监听hashchange事件，当URL中的hash部分变化时触发
    window.addEventListener('hashchange',()=>{
        console.log(location)  // 打印当前location对象，便于调试
        // 调用renderView函数，传入当前hash值
        renderView(location.hash)
    })
    
    // 根据传入的URL hash值渲染对应的组件
    function renderView(url){
        // 在routes数组中查找匹配的路由
        // 注意：这里需要将item.path前面加上#进行比较，因为location.hash包含#
        const index=routes.findIndex(item=>{return '#'+item.path===url})
        
        // 如果找到匹配的路由
        if(index!==-1){
            // 将对应组件渲染到root容器中
            document.getElementById('root').innerHTML=routes[index].component()
        }
    }
    
    // 监听DOMContentLoaded事件，确保页面加载完成后执行
    window.addEventListener('DOMContentLoaded',()=>{
        // 页面加载完成后，根据当前hash值渲染初始视图
        renderView(location.hash)
    })
</script>
</html>